<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
       <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            margin-top: 5%;
            width: 80%;
            height: 80%;
            position: absolute;
            margin-left: 5%;

        }

        .quarter-div {
            width: 1200px;
            height: 600px;
        }
    </style>
     <script src="../static/js/echarts.min.js"></script>
</head>
<body>
        <div class="main">
            <div class="quarter-div" id="main2"></div>

        </div>


    <script>
        var chartDom2 = document.getElementById('main2');
        var myChart2 = echarts.init(chartDom2);
        var position =
        {{ data | safe }}
        var xueli_count =
        {{ value | safe }}
        var option2;
        option2 = {
            title: {
                text: '票房预测分析（单位：亿）'
            },
            tooltip: {
                show: true
            },
            legend: {
                data: ['票房数量']
            },
            xAxis: {
                name: '电影名称',
                type: 'category',
                data: position,
                axisLabel: {
                    interval: 0,
                    rotate: 40,
                }
            },


            yAxis: {
                name: '票房数量',
                type: 'value'
            },
            series: [
                {
                    name: '不同电影票房数量',
                    data: xueli_count,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    },
                    itemStyle: {

                        normal: {
                            color: 'rgb(84,112,198)',

                            label: {
                                show: true,  //开启显示
                                position: 'top',  //在上方显示
                                textStyle: {  //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                }
            ]
        };

        option2 && myChart2.setOption(option2);
    </script>
    <script>

    </script>



</body>
</html>